<template>
  <div class="bigbox">
    <div class="header">
      <span @click="goshangceng()">X</span>
      <div>充值</div>
    </div>
    <h3 class="h3">
      <span>充值方式</span>
      <!-- {{ ifBankCar }} -->
      <div class="new" v-if="ifBankCar">
        <span @click="tobankCardBinding">使用新卡充值</span> <span>></span>
      </div>
      <div class="xiao" v-else>
        <span>{{ List.bank }}{{ List.num }}</span>
        <p class="jy">单日交易限额￥50000.00</p>
      </div>
    </h3>
    <div class="jkl">
      <div class="cz">
        <h4>￥</h4>
        <van-field
          class="uio"
          type="number"
          readonly
          clickable
          @touchstart.native.stop="show = true"
          placeholder="充值金额"
          :value="value"
        />
      </div>
    </div>
    <div>
      <van-number-keyboard
        v-model="value"
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="充值"
        @blur="show = false"
        @close="topayment()"
      />
    </div>
    <van-overlay :show="ifShows" @click="ifShows = false">
      <div class="wrapper">
        <div class="block">请先绑定银行卡</div>
      </div>
    </van-overlay>
    <dialogssss :showoff="shows" :price="value" />
  </div>
</template>

<script>
import { mapState } from "vuex";

import dialogssss from "../../components/dialogssss";
export default {
  name: "zhifu",
  components: {
    dialogssss,
  },
  data() {
    return {
      value: "",
      show: false, //键盘输入事件
      shows: false, //调出公共事件
      ifShow: true, //if/else判断
      ifShows: true, //遮罩层
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("data", ["List", "ifBankCar"]),
  },
  created() {},
  methods: {
    topayment() {
      if (this.ifBankCar === true) {
        this.ifShows = true; //调出请先绑定银行卡的弹框
        // this.updateIfShow(false);
      } else {
        // this.$router.push({ name: "Topayment", query: { value: this.value } });
        this.shows = true;
      }
    },
    goshangceng() {
      this.$router.go(-1);
    },
    //跳转到绑定银行卡
    tobankCardBinding() {
      this.$router.push("/bankCardBindings");

      //   this.ifShow = false;
      //   console.log(this.ifShow, "ifShow");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.bigbox {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  font-size: px2rem(18);
}
.header {
  width: 100%;
  height: px2rem(50);
  background-color: #555882;
  color: #fff;
  display: flex;
  line-height: px2rem(50);
  div {
    margin: 0 auto;
    padding-right: px2rem(40);
  }
  span {
    padding-left: px2rem(20);
  }
}
.jkl {
  width: 100%;
  height: px2rem(200);
  background-color: #ffffff;
  padding: px2rem(20);
  h3 {
    margin-top: px2rem(20);
  }
  div {
    margin-top: px2rem(20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .uio {
      margin-bottom: px2rem(20);
    }
  }
}
.h3 {
  width: 100%;
  height: px2rem(150);
  background: #f3f3f3;
  color: #6c6c6c;
  display: flex;
  align-items: center;
  justify-content: space-around;
  span {
    font-size: px2rem(16);
  }
  .xiao {
    span {
      color: #333333;
    }
    display: flex;
    flex-direction: column;
    .jy {
      font-size: px2rem(12);
      color: #9e9e9e;
    }
  }
}
.cz {
  border-bottom: 1px solid #eee;
}
.new {
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 55%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.block {
  border-radius: 20%;
  background: rgba($color: #272727, $alpha: 0.8);
  width: 40%;
  height: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.wrapper {
  background: rgba($color: #808080, $alpha: 0.4);
}
</style>
